<template xmlns="http://www.w3.org/1999/html">
  <div class="person-container"
       v-if="proxy.isAuth(['ROOT', 'CHECKUP:INSERT','CHECKUP:UPDATE'])">
    <div class="left">
      <el-descriptions title="【 体检人信息 】" direction="vertical" :column="5" border>
        <template #extra>
          <div class="operate">
<!--            @keyup="keybordHandle" @keyup.enter.native="searchHandle"  -->
            <el-input placeholder="输入 / 扫码体检编号"
                      v-model="data.dataForm.uuid" ref="uuid" class="uuid"
                      maxlength="32"
                      @keyup.enter.native="searchHandle"
                      clearable/>
            <el-button type="primary" @click="searchHandle">执行查询</el-button>
          </div>
        </template>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><User /></el-icon>
              姓名
            </div>
          </template>
          {{data.customer.name}}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Male /></el-icon>
              性别
            </div>
          </template>
          {{data.customer.sex}}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Calendar /></el-icon>
              年龄
            </div>
          </template>
          {{data.customer.age}}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Phone /></el-icon>
              电话号码
            </div>
          </template>
          {{data.customer.tel}}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Postcard /></el-icon>
              体检编号
            </div>
          </template>
          {{data.customer.uuid}}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="right">
      <el-descriptions title="【 医生信息 】" direction="vertical" :column="5" border>
        <template #extra>
          <el-button type="primary" @click="selectDeptHandle">选择科室</el-button>
        </template>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><User /></el-icon>
              姓名
            </div>
          </template>
          {{ data.doctor.name }}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Male /></el-icon>
              性别
            </div>
          </template>
          {{ data.doctor.sex }}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Phone /></el-icon>
              电话号码
            </div>
          </template>
          {{ data.doctor.tel }}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><OfficeBuilding /></el-icon>
              体检科室
            </div>
          </template>
          {{ data.dataForm.place }}
        </el-descriptions-item>
        <el-descriptions-item align="center">
          <template #label>
            <div class="cell-item">
              <el-icon class="icon"><Calendar /></el-icon>
              当前日期
            </div>
          </template>
          {{ data.doctor.date }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
  <div class="checkup-container">
    <table>
      <tr>
        <th width="50">序号</th>
        <th width="100" align="left">体检项</th>
        <th width="400" align="left">检查结果</th>
      </tr>
      <tr v-for="(one,index) in data.dataForm.checkup">
        <td align="center">{{index+1}}</td>
        <td>{{one.item}}</td>
        <td>
          <div class="value-container">
            <el-select v-model="one.input.select" class="m-2"
                       placeholder="选择模板值">
              <el-option v-for="item in one.value" :label="item"
                         :value="item" />
            </el-select>
            <el-input v-model="one.input.value"
                      :disabled="one.input.select!='其他'"
                      placeholder="输入体检值" class="input-value" clearable />
          </div>
        </td>
      </tr>
    </table>
    <div class="operate" v-if="data.dataForm.checkup.length>0">
      <el-button type="danger" size="large" @click="clearCheckupHandle">
        重置数据
      </el-button>
      <el-button type="primary" size="large" @click="dataFormSubmit">
        提交体检结果
      </el-button>
    </div>
  </div>
<!--科室彈窗-->
  <el-dialog title="选择科室"
             v-if="proxy.isAuth(['ROOT', 'CHECKUP:INSERT', 'CHECKUP:UPDATE'])"
             :close-on-click-modal="false" v-model="dialog.visible"
             width="300px">
    <el-form :model="data.dataForm" ref="dialogForm"
             :rules="dialog.dataRule" label-width="80px">
      <el-form-item label="科室名称" prop="place">
        <el-select v-model="data.dataForm.place" placeholder="选择科室"
                   clearable="clearable" @change="changePlaceHandle">
          <el-option label="外科" value="外科" />
          <el-option label="内科" value="内科" />
          <el-option label="眼科" value="眼科" />
          <el-option label="耳鼻喉科" value="耳鼻喉科" />
          <el-option label="口腔科" value="口腔科" />
          <el-option label="放射科" value="放射科" />
          <el-option label="妇科" value="妇科" />
          <el-option label="男科" value="男科" />
          <el-option label="一般检查室" value="一般检查室" />
          <el-option label="动脉硬化检测室" value="动脉硬化检测室" />
          <el-option label="心电图室" value="心电图室" />
          <el-option label="采血室" value="采血室" />
          <el-option label="尿常规室" value="尿常规室" />
          <el-option label="超声检查室" value="超声检查室" />
          <el-option label="骨密度检查室" value="骨密度检查室" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialog.visible = false">取消</el-button>
            <el-button type="primary" @click="dialog.visible = false">确定</el-button>
        </span>
    </template>
  </el-dialog>


</template>

<script lang="ts" setup>
import { reactive, getCurrentInstance, ref } from "vue";
import { ElMessageBox } from 'element-plus'
import { dayjs } from 'element-plus'
import { isBlank } from "../../utils/validate";

const { proxy } = getCurrentInstance();

const data = reactive({
  dataForm: {
    place: null,
    uuid: null,
    checkup: [],
    template: null
  },
  customer: {
    name: "<无>",
    sex: "<无>",
    age: "<无>",
    tel: "<无>",
    uuid: "<无>",
    date: null
  },
  doctor: {
    name: null,
    sex: null,
    tel: null,
    date: new Date().toLocaleDateString()
  },
});


function loadDoctorSummary() {
  proxy.$http("/mis/user/searchDoctorById", "GET", {}, true, function (resp) {
    let result = resp.result;
    data.doctor.name = result.name;
    data.doctor.sex = result.sex;
    data.doctor.tel = result.tel
  });
}

loadDoctorSummary();

const dialog = reactive({
  visible: false,
  dataRule: {
    place: [{ required: true, message: "没有选择科室" }],
  },
});

function selectDeptHandle() {
  dialog.visible = true;
}

function changePlaceHandle() {
  clearData()
}

function clearData() {
  //清空体检人信息
  data.customer.name = "<无>"
  data.customer.sex = "<无>"
  data.customer.tel = "<无>"
  data.customer.age = "<无>"
  data.customer.uuid = "<无>"
  data.customer.date = null

  //清空体检项
  data.dataForm.uuid = null;
  data.dataForm.checkup = []

  //文本框自动获得焦点
  proxy.$refs.uuid.focus();
}



//监听键盘快捷键
document.onkeyup = function (e) {
  if (e.key == "F4") {
    proxy.$refs.uuid.focus();
    data.dataForm.uuid = null
  }
};

function searchHandle() {
  if (isBlank(data.dataForm.place)) {
    proxy.$message({
      message: '请先选择科室',
      type: 'error',
      duration: 1200
    });
  }
  else if (data.dataForm.uuid == null || data.dataForm.uuid == "") {
    proxy.$message({
      message: '请输入体检编号',
      type: 'error',
      duration: 1200
    });
  }
  else if (/^[0-9a-zA-Z]{32}$/.test(data.dataForm.uuid) == false) {
    proxy.$message({
      message: '体检编号不正确',
      type: 'error',
      duration: 1200
    });
  }
  else {
    let json = { uuid: data.dataForm.uuid }
    proxy.$http("/mis/appointment/searchByUuid", "POST", json, true, function (resp) {
      let result = resp.result
      data.customer.name = result.name
      data.customer.sex = result.sex
      data.customer.tel = result.tel
      data.customer.age = result.age
      data.customer.uuid = result.uuid
      data.customer.date = result.date
      if (data.customer.date != dayjs().format("YYYY-MM-DD")) {
        proxy.$refs.uuid.blur();
        ElMessageBox.confirm('不是今日的体检，是否要执行体检?', '提示信息',
            {
              confirmButtonText: '执行',
              cancelButtonText: '拒绝',
              type: 'error',
            }
        ).then(() => {
          loadCheckup()
        })
            .catch(() => {
              clearData()
            })
      }
      else {
        loadCheckup()
      }
    })
  }
}

function loadCheckup() {
  let json = {
    uuid: data.dataForm.uuid,
    place: data.dataForm.place
  }
  proxy.$http("/mis/checkup/searchCheckupByPlace", "POST", json, true, function (resp) {
    let result = resp.result
    //判断该科室是否录入了体检结果
    if (result.hasAlreadyCheckup) {
      ElMessageBox.confirm(
          '该体检套餐已经存在当前科室的检查结果，是否重新执行检查?',
          '提示信息',
          {
            confirmButtonText: '执行',
            cancelButtonText: '拒绝',
            type: 'warning',
          }
      ).then(() => {
        //处理数据
        for (let one of result.checkupList) {
          //给每个元素添加input属性，跟选择什么预设值有关
          one.input = { select: null, value: null }
          //判断预设值是“无”的情况
          if (one.value == "无") {
            //列表项内容为“其他”
            one.value = ["其他"]
            //设置列表选中内容
            one.input.select = "其他"
          }
          else {
            //切分预设值形成数组
            one.value = one.value.split("#")
          }
          //提交体检结果的时候需要提交输入模板种类，该模板与生成体检报告有关
          data.dataForm.template = one.template
        }
        data.dataForm.checkup = result.checkupList
      }).catch(() => {
        clearData()
      })
    }
    else {
      for (let one of result.checkupList) {
        one.input = { select: null, value: null }
        if (one.value == "无") {
          one.value = ["其他"]
          one.input.select = "其他"
        }
        else {
          one.value = one.value.split("#")
        }

        data.dataForm.template = one.template
      }
      data.dataForm.checkup = result.checkupList
    }
  })
}

function clearCheckupHandle() {
  for (let one of data.dataForm.checkup) {
    if (one.value.length == 1) {
      one.input = { select: "其他", value: null }
    }
    else {
      one.input = { select: null, value: null }
    }
  }
}

function dataFormSubmit() {
  let flag = false;
  let item = []
  for (let one of data.dataForm.checkup) {
    let input = one.input
    let select = input.select
    let value = input.value
    if (isBlank(select) || (select == "其他" && isBlank(value))) {
      flag = true;
      break;
    }
    let temp = { "name": one.item, "unit": one.unit, "standard": one.standard }
    if (input.select == "其他") {
      temp.value = value;
    }
    else {
      temp.value = select;
    }
    item.push(temp)
  }
  if (flag) {
    proxy.$message({
      message: '存在未输入的检查结果',
      type: 'error',
      duration: 1200
    });
    return
  }
  let json = {
    name: data.doctor.name,
    uuid: data.dataForm.uuid,
    place: data.dataForm.place,
    template: data.dataForm.template,
    item: item
  }
  proxy.$http("/mis/checkup/addResult", "POST", json, true, function (resp) {
    proxy.$message({
      message: '提交成功',
      type: 'success',
      duration: 1200,
      onClose: () => {
        clearData();
      }
    });
  })
}


</script>


<style lang="less" scoped>
@import url('doctor_checkup.less');
</style>

